<template>
  <div>
    <el-form ref="querForm" size="mini" inline="true" :model="querForm">
      <el-form-item label="员工id">
        <el-input
          v-model="querForm.partname"
          placeholder="请输入查询配件名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="角色">
        <el-button type="primary" @click="chaxun">查询</el-button>
        <el-button type="primary" @click="add">新增配件</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="loading" style="width: 100%">
      <el-table-column prop="id" label="id" width="100"> </el-table-column>
      <el-table-column prop="serviceid" label="所属服务id" align="center" width="200">
      </el-table-column>
      <el-table-column prop="partname" label="配件名称"  width="300">
      </el-table-column>
      <el-table-column prop="partprice" label="配件价格" align="center" width="200">
      </el-table-column>
      <el-table-column
        prop="category"
        label="类别"
        width="200"
      ></el-table-column>
      <el-table-column prop="brand" label="品牌" width="100" align="center"></el-table-column>

      <el-table-column fixed="right" label="操作" width="400">
        <template slot-scope="scope">
          <div class="buttonflex">
            <el-button
              class="el-button"
              @click="update(scope.row)"
              type="success"
              size="mini"
              >修改</el-button
            >
            <el-button
              class="el-button"
              @click="del(scope.row.id)"
              type="danger "
              size="mini"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="el-pagination"
      background
      layout="prev, pager, next"
      @current-change="changePage"
      :page-size="querForm.pagesize"
      :total="total"
    >
    </el-pagination>

    <el-dialog :title="title" :visible.sync="open">
      <!-- this.$refs.form.validate(valid) => {}  -->
      <el-form :rules="rules" ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="serviceid" prop="serviceid">
              <el-select v-model="form.serviceid" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-input v-model="form.serviceid"></el-input> -->
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="partname" prop="partname">
              <el-input v-model="form.partname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="category" prop="category">
              <el-select v-model="form.category" placeholder="请选择所属类别">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="desc" prop="desc">
              <el-input v-model="form.desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="partprice" prop="partprice">
              <el-input maxlength="5" v-model="form.partprice"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="brand" prop="brand">
              <el-input v-model="form.brand"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitFrom">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getuserlistlength, list, cx, addpart, del, update } from "@/api/parts";
export default {
  name: "partslist-index",
  data() {
    return {
      query: "",
      tableData: [],
      open: false,

      options: [
        {
          value: 1,
          label: "空调",
        },
        {
          value: 2,
          label: "冰箱",
        },
        {
          value: 3,
          label: "洗衣机",
        },
        {
          value: 4,
          label: "电视",
        },
        {
          value: 5,
          label: "热水器",
        },
      ],

      options2: [
        {
          value: "故障",
          label: "故障",
        },
        {
          value: "配件",
          label: "配件",
        },
      ],

      form: {},
      title: "",
      selectedrow: {},

      querForm: {
        page: 1,
        pagesize: 12,
        employeeid: "",
      },
      total: 50,
      loading: true,

      methods: "",
      rules: {
        serviceid: [
          { required: true, message: "请输入该服务所属id", trigger: "blur" },
        ],
        partname: [
          { required: true, message: "请输入配件名称", trigger: "blur" },
        ],
        partprice: [
          { required: true, message: "请输入制定价格", trigger: "blur" },
        ],
        category: [{ required: true, message: "请填写名字", trigger: "blur" }],

        desc: [{ required: false, message: "请输入单位描述", trigger: "blur" }],
        brand: [{ required: true, message: "请填写所属品牌", trigger: "blur" }],
      },
    };
  },

  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      setTimeout(() => {
        this.loading = false;
      }, 400);
      list(this.querForm).then((resp) => {
        this.tableData = resp;
      });

      this.getuserlistlength();
    },

    //获取总数据条数
    getuserlistlength() {
      getuserlistlength().then((resp) => {
        this.total = resp;
      });
    },

    //查询
    chaxun() {
      this.querForm.page = 1;
      cx(this.querForm).then((resp) => {
        this.tableData = resp;
      });
      this.loadData();
    },

    changePage(page) {
      this.querForm.page = page;
      this.loadData();
    },

    add() {
      this.form = {};
      this.open = true;
      this.title = "添加配件";

      this.methods = "addpart";
    },

    update(row) {
      this.open = true;

      // console.log(JSON.stringify(row)===JSON.stringify(row))

      this.selectedrow = row;
      this.form = JSON.parse(JSON.stringify(row));

      this.title = "修改配件";
      this.methods = "updatepart";
    },

    submitFrom() {
      // console.log("数据改变");
      //判断验证是否通过
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.methods == "addpart") {
            addpart(this.form).then((resp) => {
              if (resp == 1) {
                this.$message.success("添加成功");

                this.open = false;
                this.loadData();
              }
              if (resp == 0) {
                this.$message.error(`该配件名称已经存在`);
                this.open = false;
                this.loadData();
              }
            });
          }

          if (this.methods == "updatepart") {
            //判断数据是否更改
            if (JSON.stringify(this.selectedrow) != JSON.stringify(this.form)) {
              // console.log(this.form);
              this.form.oldpartname = this.selectedrow.partname;
              update(this.form).then((resp) => {
                if (resp == 1) {
                  this.$message.success("修改成功");
                } else {
                  this.$message.error(`配件名称${this.form.partname}已经存在`);
                }
                this.open = false;
                this.loadData();
              });
            } else {
              // console.log("数据未改变");
              this.$message.success("数据未发生改变");
              this.open = false;
            }
          }
        }
      });
    },

    del(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(id);
        del(id).then(() => {
          this.$message.success("删除成功");
          this.loadData();
        });
      });
    },
  },
};
</script>

<style scoped>
.el-pagination {
  position: absolute;
  top: 850px;
}
.el-button {
  width: 70px;
}
.buttonflex {
  display: flex;
}
</style>